<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'grouppickup.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
    </div>
    <z-Table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-Table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'grouppickup',
  data: function () {
    return {
      name: '站别捡料类型',
      api: this.$api.grouppickup,
      columns: [
        { title: '工序', key: 'group_name', width: 110 },
        { title: '料头', key: 'material_prefix', width: 100 },
        { title: '物料类型', key: 'material_type', width: 100 },
        { title: '捡料编码', key: 'pickup_code', width: 120 },
        { title: '客户编码', key: 'cust_code', width: 100 },
        { title: '客户名称', key: 'cust_name', width: 100 },
        { title: '客户类型', key: 'cust_type', width: 100 },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 80 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '工序',
          span: 12,
          key: 'group_id',
          name: 'select',
          options: [],
        },
        {
          title: '料头',
          span: 12,
          key: 'mat_prefix_id',
          name: 'select',
          options: [],
        },
        {
          title: '备注',
          key: 'remarks',
          name: 'textarea',
        },
      ],
    }
  },
  methods: {
    submit: function () {
      this.submitLoading = true
      // let url = this.api + (this.data.id ? 'update' : 'add')
      let url = this.api + 'update'
      this.$request(url, this.data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.matprefix + 'getlist')
      .then((r) => {
        this.setFieldOptions('mat_prefix_id', r.list, 'id', ['material_prefix', 'material_type'])
      })
      .catch(() => {})
    this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' })
      .then((r) => {
        this.setFieldOptions('group_id', r, r && r[0].id == undefined ? 'group_code' : 'id', 'group_name')
      })
      .catch(() => {})
  },
  watch: {},
}
</script>

<style scoped>
</style>
